Navigation API 마스터하기: 단일 페이지 애플리케이션 라우팅 및 히스토리 관리

Navigation API는 단일 페이지 애플리케이션(SPA) 내에서 라우팅 및 히스토리 관리를 처리하는 방식에 있어 중요한 발전을 의미합니다. 기존 방식은 종종 `window.location` 객체를 조작하거나 서드파티 라이브러리를 활용하는 데 의존했습니다. 이러한 접근 방식도 훌륭했지만, Navigation API는 더 간소화되고 성능이 뛰어나며 풍부한 기능을 갖춘 솔루션을 제공하여 개발자가 사용자의 내비게이션 경험을 더 효과적으로 제어할 수 있게 해줍니다.

Navigation API란 무엇인가?

Navigation API는 SPA가 내비게이션, 라우팅, 히스토리를 관리하는 방식을 단순화하고 향상시키기 위해 설계된 최신 브라우저 API입니다. 이는 새로운 `navigation` 객체를 도입하여, 개발자가 전체 페이지 새로고침 없이 내비게이션 이벤트를 가로채고 제어하며, URL을 업데이트하고, 일관된 브라우징 히스토리를 유지할 수 있는 메서드와 이벤트를 제공합니다. 그 결과 더 빠르고 부드러우며 반응성이 뛰어난 사용자 경험을 제공할 수 있습니다.

Navigation API 사용의 이점

• 성능 향상: 전체 페이지 새로고침을 없애줌으로써 Navigation API는 SPA의 성능을 크게 향상시킵니다. 여러 뷰 사이의 전환이 더 빠르고 부드러워져 더욱 매력적인 사용자 경험으로 이어집니다.
• 향상된 제어: 이 API는 내비게이션 이벤트에 대한 세밀한 제어를 제공하여 개발자가 필요에 따라 내비게이션 동작을 가로채고 수정할 수 있게 합니다. 여기에는 내비게이션 방지, 사용자 리디렉션, 내비게이션 전후에 사용자 정의 로직 실행 등이 포함됩니다.
• 간소화된 히스토리 관리: Navigation API를 사용하면 브라우저의 히스토리 스택 관리가 더 쉬워집니다. 개발자는 프로그래밍 방식으로 히스토리 항목을 추가, 교체, 탐색하여 일관되고 예측 가능한 브라우징 경험을 보장할 수 있습니다.
• 선언적 내비게이션: Navigation API는 라우팅에 대한 선언적 접근 방식을 장려하여 개발자가 명확하고 간결한 방식으로 내비게이션 규칙과 동작을 정의할 수 있게 합니다. 이는 코드 가독성과 유지보수성을 향상시킵니다.
• 최신 프레임워크와의 통합: Navigation API는 React, Angular, Vue.js와 같은 최신 자바스크립트 프레임워크 및 라이브러리와 원활하게 통합되도록 설계되었습니다. 이를 통해 개발자는 기존 개발 워크플로우 내에서 API의 기능을 활용할 수 있습니다.

핵심 개념 및 기능

1. `navigation` 객체

Navigation API의 핵심은 `navigation` 객체이며, 이는 전역 `window` 객체(`window.navigation`)를 통해 접근할 수 있습니다. 이 객체는 다음과 같은 내비게이션 관련 다양한 속성 및 메서드에 대한 접근을 제공합니다:

• `currentEntry`: 내비게이션 히스토리의 현재 항목을 나타내는 `NavigationHistoryEntry` 객체를 반환합니다.
• `entries()`: 내비게이션 히스토리의 모든 항목을 나타내는 `NavigationHistoryEntry` 객체의 배열을 반환합니다.
• `navigate(url, { state, info, replace })`: 새로운 URL로 이동합니다.
• `back()`: 이전 히스토리 항목으로 돌아갑니다.
• `forward()`: 다음 히스토리 항목으로 앞으로 이동합니다.
• `reload()`: 현재 페이지를 새로고침합니다.
• `addEventListener(event, listener)`: 내비게이션 관련 이벤트에 대한 이벤트 리스너를 추가합니다.

2. `NavigationHistoryEntry`

`NavigationHistoryEntry` 인터페이스는 내비게이션 히스토리의 단일 항목을 나타냅니다. 이는 URL, 상태, 고유 ID와 같은 항목에 대한 정보를 제공합니다.

• `url`: 히스토리 항목의 URL입니다.
• `key`: 히스토리 항목의 고유 식별자입니다.
• `id`: 내비게이션 이벤트의 생명 주기를 추적하는 데 특히 유용한 또 다른 고유 식별자입니다.
• `sameDocument`: 내비게이션이 동일 문서 내비게이션으로 이어지는지를 나타내는 불리언 값입니다.
• `getState()`: 히스토리 항목과 연관된 상태를 반환합니다 (내비게이션 중에 설정됨).

3. 내비게이션 이벤트

Navigation API는 개발자가 내비게이션 동작을 모니터링하고 제어할 수 있도록 여러 이벤트를 발생시킵니다. 이러한 이벤트는 다음과 같습니다:

• `navigate`: 내비게이션이 시작될 때(예: 링크 클릭, 폼 제출, `navigation.navigate()` 호출) 발생합니다. 이는 내비게이션 요청을 가로채고 처리하는 주요 이벤트입니다.
• `navigatesuccess`: 내비게이션이 성공적으로 완료될 때 발생합니다.
• `navigateerror`: 내비게이션이 실패할 때(예: 네트워크 오류 또는 처리되지 않은 예외) 발생합니다.
• `currentchange`: 현재 히스토리 항목이 변경될 때(예: 앞뒤로 이동 시) 발생합니다.
• `dispose`: `replaceState` 작업 중 히스토리에서 제거되는 등 `NavigationHistoryEntry`에 더 이상 접근할 수 없을 때 발생합니다.

Navigation API로 라우팅 구현하기: 실용적인 예제

Navigation API를 사용하여 간단한 SPA에서 기본 라우팅을 구현하는 방법을 살펴보겠습니다. 홈, 정보, 연락처 세 개의 뷰를 가진 애플리케이션을 가정해 봅시다.

먼저, 라우트 변경을 처리하는 함수를 만듭니다:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
홈
홈 페이지에 오신 것을 환영합니다!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
정보
저희에 대해 더 알아보세요.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
연락처
저희에게 연락주세요.
';
      break;
    default:
      contentDiv.innerHTML = '
404 찾을 수 없음
페이지를 찾을 수 없습니다.
';
  }
}

다음으로, `navigate` 이벤트에 이벤트 리스너를 추가합니다:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // 기본 브라우저 내비게이션 방지

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // 라우트 처리 후 프로미스 해결
  });

  event.transition = promise;
});

이 코드는 `navigate` 이벤트를 가로채고, `event.destination` 객체에서 URL을 추출하고, 기본 브라우저 내비게이션을 방지하고, `handleRouteChange`를 호출하여 콘텐츠를 업데이트한 다음, `event.transition` 프로미스를 설정합니다. `event.transition`을 설정하면 브라우저가 콘텐츠 업데이트가 완료될 때까지 기다렸다가 페이지를 시각적으로 업데이트하게 됩니다.

마지막으로, 내비게이션을 트리거하는 링크를 만들 수 있습니다:

홈 | 정보 | 연락처

그리고 해당 링크에 클릭 리스너를 추가합니다:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

이것으로 Navigation API를 사용한 기본 클라이언트 사이드 라우팅이 설정되었습니다. 이제 링크를 클릭하면 전체 페이지 새로고침 없이 `content` div의 콘텐츠를 업데이트하는 내비게이션 이벤트가 트리거됩니다.

상태 관리 추가

Navigation API는 각 히스토리 항목에 상태를 연결할 수도 있습니다. 이는 내비게이션 이벤트 간에 데이터를 보존하는 데 유용합니다. 이전 예제를 수정하여 상태 객체를 포함시켜 보겠습니다.

`navigation.navigate()`를 호출할 때 `state` 객체를 전달할 수 있습니다:

window.navigation.navigate('/about', { state: { pageTitle: '회사 소개' } });

`navigate` 이벤트 리스너 내에서 `event.destination.getState()`를 사용하여 상태에 접근할 수 있습니다:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || '내 앱'; // 기본 제목

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
홈
홈 페이지에 오신 것을 환영합니다!
';
      title = '홈';
      break;
    case '/about':
      contentDiv.innerHTML = '
정보
저희에 대해 더 알아보세요.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
연락처
저희에게 연락주세요.
';
      break;
    default:
      contentDiv.innerHTML = '
404 찾을 수 없음
페이지를 찾을 수 없습니다.
';
      title = '404 찾을 수 없음';
  }
  document.title = title;
}

이 수정된 예제에서 `handleRouteChange` 함수는 이제 `state` 매개변수를 받아 문서 제목을 업데이트하는 데 사용합니다. 상태가 전달되지 않으면 기본값으로 '내 앱'이 사용됩니다.

`navigation.updateCurrentEntry()` 사용하기

때로는 새로운 내비게이션을 트리거하지 않고 현재 히스토리 항목의 상태만 업데이트하고 싶을 수 있습니다. `navigation.updateCurrentEntry()` 메서드를 사용하면 이 작업을 수행할 수 있습니다. 예를 들어, 사용자가 현재 페이지에서 설정을 변경하면 해당 변경 사항을 반영하도록 상태를 업데이트할 수 있습니다:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('설정 업데이트:', setting, '->', value);
}

// 사용 예시:
updateUserSetting('theme', 'dark');

이 함수는 현재 상태를 가져와 업데이트된 설정을 병합한 다음, 현재 히스토리 항목을 새 상태로 업데이트합니다.

고급 사용 사례 및 고려 사항

1. 폼 제출 처리

Navigation API는 SPA에서 폼 제출을 처리하는 데 사용될 수 있으며, 전체 페이지 새로고침을 방지하고 더 원활한 사용자 경험을 제공합니다. 폼 제출 이벤트를 가로채고 `navigation.navigate()`를 사용하여 URL을 업데이트하고 전체 페이지 새로고침 없이 결과를 표시할 수 있습니다.

2. 비동기 작업

내비게이션 이벤트를 처리할 때 API에서 데이터를 가져오는 것과 같은 비동기 작업을 수행해야 할 수 있습니다. `event.transition` 속성을 사용하면 내비게이션 이벤트에 프로미스를 연결하여 브라우저가 페이지를 업데이트하기 전에 비동기 작업이 완료될 때까지 기다리도록 할 수 있습니다. 위 예제를 참조하세요.

3. 스크롤 복원

내비게이션 중에 스크롤 위치를 유지하는 것은 좋은 사용자 경험을 제공하는 데 중요합니다. Navigation API는 히스토리에서 앞뒤로 이동할 때 스크롤 위치를 복원하는 메커니즘을 제공합니다. `NavigationHistoryEntry`의 `scroll` 속성을 사용하여 스크롤 위치를 저장하고 복원할 수 있습니다.

4. 오류 처리

네트워크 오류나 처리되지 않은 예외와 같이 내비게이션 중에 발생할 수 있는 오류를 처리하는 것이 중요합니다. `navigateerror` 이벤트를 사용하면 이러한 오류를 정상적으로 포착하고 처리하여 애플리케이션이 충돌하거나 사용자에게 오류 메시지를 표시하는 것을 방지할 수 있습니다.

5. 점진적 향상

Navigation API로 SPA를 구축할 때 점진적 향상을 고려하는 것이 중요합니다. 브라우저에서 Navigation API를 지원하지 않더라도 애플리케이션이 올바르게 작동하는지 확인해야 합니다. 기능 감지를 사용하여 `navigation` 객체의 존재를 확인하고 필요한 경우 기존 라우팅 방식으로 대체할 수 있습니다.

기존 라우팅 방식과의 비교

SPA의 기존 라우팅 방식은 종종 `window.location` 객체를 조작하거나 `react-router` 또는 `vue-router`와 같은 서드파티 라이브러리를 사용하는 데 의존합니다. 이러한 방식은 널리 사용되고 잘 정립되어 있지만 몇 가지 한계가 있습니다:

• 전체 페이지 새로고침: `window.location`을 직접 조작하면 전체 페이지 새로고침이 발생할 수 있으며, 이는 느리고 사용자 경험을 방해할 수 있습니다.
• 복잡성: 기존 방식으로 히스토리와 상태를 관리하는 것은 특히 크고 복잡한 애플리케이션에서 복잡하고 오류가 발생하기 쉽습니다.
• 성능 오버헤드: 서드파티 라우팅 라이브러리는 특히 애플리케이션의 특정 요구 사항에 최적화되지 않은 경우 상당한 성능 오버헤드를 추가할 수 있습니다.

Navigation API는 라우팅 및 히스토리 관리를 위한 더 간소화되고 성능이 뛰어나며 풍부한 기능을 갖춘 솔루션을 제공하여 이러한 한계를 해결합니다. 전체 페이지 새로고침을 없애고, 히스토리 관리를 단순화하며, 내비게이션 이벤트에 대한 세밀한 제어를 제공합니다.

브라우저 호환성

2024년 후반 기준으로 Navigation API는 Chrome, Firefox, Safari, Edge를 포함한 최신 브라우저 전반에서 좋은 지원을 받고 있습니다. 그러나 프로덕션 애플리케이션에 Navigation API를 구현하기 전에는 항상 Can I use와 같은 리소스에서 최신 브라우저 호환성 정보를 확인하는 것이 좋습니다. 구형 브라우저 지원이 필수적인 경우 폴리필이나 대체 메커니즘 사용을 고려하세요.

결론

Navigation API는 고급 라우팅 및 히스토리 관리 기능을 갖춘 현대적이고 성능이 뛰어난 SPA를 구축하기 위한 강력한 도구입니다. 개발자는 이 API의 기능을 활용하여 더 빠르고 부드러우며 매력적인 사용자 경험을 만들 수 있습니다. 초기 학습 곡선이 더 간단하고 오래된 방법을 사용하는 것보다 가파를 수 있지만, 특히 복잡한 애플리케이션에서 Navigation API의 장점은 투자할 가치가 있습니다. Navigation API를 채택하여 SPA의 잠재력을 최대한 활용하세요.

추가 학습 자료

• MDN 웹 문서: Navigation API
• WICG Navigation API 명세